<template> 
    <a-form :form="addOrEditForm" >
    <div class="down-tree" style="height:400px;overflow-y:auto;margin-left: 20px;margin-top: 10px;">
        <a-upload-dragger
        name="file"
        :multiple="true"  
        :headers="headers" 
        :action="url.upload"
        :key="fileKey"
        @change="handleChange"
        >
        <p class="ant-upload-drag-icon">
            <a-icon type="inbox" />
        </p>
        <p class="ant-upload-text">
            单击或拖动文件到此区域进行上传
        </p>
        <p class="ant-upload-hint">
            支持单次或批量上传。
        </p>
        </a-upload-dragger>
    </div>
    <div class="table-operator">   
            <a-button @click="handleOk()" type="danger" icon="check-square" >提交</a-button>   
          </div>
    </a-form>  
  </template>
  
  
  <script> 
  import { httpAction, getAction } from '@/api/manage'
  import { mapGetters } from 'vuex'  
  import store from '@/store'
  export default {
    name: 'bdUpload',
    components: { 
    },
    props: {
      onConfirm:{
        type : Function,
        default: () => {},
      },
      formData :{
        type:Object,
        default: () => {},
      } 
          
        
    },
    data () {
      return {
        loading: false,
        headers: { 
          'X-Access-Token':  store.getters.token
        }, 
        visible: false,
        wrapperCol:'',
        title: '选择合适的上传方式进行上传', 
       
        addOrEditForm: this.$form.createForm(this),
        // form: this.$form.createForm(this), // 只有这样注册后，才能通过表单拉取数据
        url: {  
          upload: window._CONFIG['domianURL'] +"/ap/apInfo/upload",
          add:"/mlwj/daMlwj/add"
        },
        data:{
          id:'',
          filelist:[],
        },
        fileKey:"",
        
      }
    },
    created (id) {
      console.log("created");  
      console.log("upload地址",this.url.upload);
      this.data.id = id;
    },
  
    methods: {
      show(){
        this.addOrEditForm.resetFields();
      },
      handleUpload(e){
  
      },
      handleChange(info) {
        const status = info.file.status;
        if (status !== 'uploading') {
          this.data.filelist = info.fileList;
          console.log(info.file, info.fileList);
        }
        if (status === 'done') { 
          this.data.filelist = info.fileList;
          this.$message.success(`${info.file.name} 文件上传成功.`);
        } else if (status === 'error') {
          this.data.filelist = info.fileList;      
          this.$message.error(`${info.file.name} 文件上载失败.`);
        }
      },
      ...mapGetters(["userInfo"]),
      show(id) {
        this.fileKey = Math.random();
        this.data.id = id;
        this.visible = true;
        this.addOrEditForm.resetFields();
        this.visible = true;
      },
      close () {
        this.$emit('destroy');
        this.visible = false;
      },
      confirm() {
        console.log("confirm");
        this.onConfirm('子窗体返回的值');
      },
      handleSubmit() {
        if (this.data.filelist.length == 0){
          this.$message.error("请上传文件");
          return;
        }
        httpAction(this.url.add,this.data,'post').then((res)=>{ 
          if(res.code == "0"){
            this.$emit('ok','');
            this.close(); 
          }
          }).finally(() => { 
        })   
      
      },
  
      handleCancel() {
        this.close()
      },
      handleOk(){
        this.$emit('ok','upload',this.data.filelist)
      },
    
      handleConfirmBlur  (e) {
        const value = e.target.value
        this.confirmDirty = this.confirmDirty || !!value
      }
    }
  }
  </script>
  
  <style>
    .ant-upload.ant-upload-drag{
      height:200px
    }
    /* .ant-card{
      height:100%
    }
    .ant-card-body{
      padding: 10px;
    }
    .ant-modal-body{
      padding: 10px;
    }
    .ant-modal-footer{
      display: none;
    } */
  </style>